<template>
  <el-row style="margin-bottom: 20px">
    <el-col :span="12" style="font-size: 30px; font-weight: bold;">我的地址</el-col>
    <el-col :span="12" style="text-align: right">
      <el-button type="success" size="large" @click="addDialogShow=true">添加地址</el-button>
    </el-col>
  </el-row>
  <div>
    <ul class="addrList">
      <li v-for="(addr,index) in addrList" :key="index" :class="{defaultAddr:addr.status===1}">
        <div class="area">{{ addr.province }}-{{ addr.city }}-{{ addr.district }}-{{ addr.street }}</div>
        <div class="address">{{ addr.address }}</div>
        <div class="contact">{{ addr.contact }}</div>
        <div class="phone">{{ addr.phone }}</div>
        <div class="option">
          <el-button v-if="addr.status===1" disabled>默认地址</el-button>
          <el-button v-else @click="setDefault(addr.id)">设为默认</el-button>
          <el-button @click="showUpdateDialogShow(addr.id)">修改</el-button>
          <el-button style="margin-right: 3px" @click="deleteAddr(addr.id)">删除</el-button>
        </div>
      </li>
    </ul>
  </div>
  <!-- 添加地址的对话框开始 -->
  <el-dialog v-model="addDialogShow" title="新增地址" width="800">
    <el-form>
      <el-form-item label="省/市/区县/街道" label-width="20%">
        <el-select v-model="addr.province" placeholder="请选择省" style="width: 130px;margin-right: 10px"
                   clearable
                   @change="selectProvince">
          <el-option
              v-for="(p,index) in pcas"
              :key="index"
              :value="p.name"
          />
        </el-select>
        <el-select v-model="addr.city" placeholder="请选择市" style="width: 130px;margin-right: 10px"
                   clearable
                   @change="selectCity">
          <el-option
              v-for="(c,index) in province.children"
              :key="index"
              :value="c.name"
          />
        </el-select>
        <el-select v-model="addr.district" placeholder="请选择区县" style="width: 130px;margin-right: 10px"
                   clearable
                   @change="selectDistrict">
          <el-option
              v-for="(d,index) in city.children"
              :key="index"
              :value="d.name"
          />
        </el-select>
        <el-select v-model="addr.street" placeholder="请选择街道" style="width: 130px;margin-right: 10px"
                   clearable>
          <el-option
              v-for="(s,index) in district.children"
              :key="index"
              :value="s.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" label-width="20%">
        <el-input v-model="addr.address" placeholder="请输入详细地址" style=" width: 400px
        "/>
      </el-form-item>
      <el-form-item label="联系人" label-width="20%">
        <el-input v-model="addr.contact" placeholder="请输入联系人" style=" width: 400px
        "/>
      </el-form-item>
      <el-form-item label="电话" label-width="20%">
        <el-input v-model="addr.phone" placeholder="请输入电话" style=" width: 400px
        "/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogShow = false">取消</el-button>
        <el-button @click="insert">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加地址的对话框结束 -->
  <!-- 修改地址的对话框开始 -->
  <el-dialog v-model="updateDialogShow" title="修改地址" width="800">
    <el-form>
      <el-form-item label="省/市/区县/街道" label-width="20%">
        <el-select v-model="addr.province" placeholder="请选择省" style="width: 130px;margin-right: 10px"
                   clearable
                   @change="selectProvince">
          <el-option
              v-for="(p,index) in pcas"
              :key="index"
              :value="p.name"
          />
        </el-select>
        <el-select v-model="addr.city" placeholder="请选择市" style="width: 130px;margin-right: 10px"
                   clearable
                   @change="selectCity">
          <el-option
              v-for="(c,index) in province.children"
              :key="index"
              :value="c.name"
          />
        </el-select>
        <el-select v-model="addr.district" placeholder="请选择区县" style="width: 130px;margin-right: 10px"
                   clearable
                   @change="selectDistrict">
          <el-option
              v-for="(d,index) in city.children"
              :key="index"
              :value="d.name"
          />
        </el-select>
        <el-select v-model="addr.street" placeholder="请选择街道" style="width: 130px;margin-right: 10px"
                   clearable>
          <el-option
              v-for="(s,index) in district.children"
              :key="index"
              :value="s.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" label-width="20%">
        <el-input v-model="addr.address" placeholder="请输入详细地址" style=" width: 400px
        "/>
      </el-form-item>
      <el-form-item label="联系人" label-width="20%">
        <el-input v-model="addr.contact" placeholder="请输入联系人" style=" width: 400px
        "/>
      </el-form-item>
      <el-form-item label="电话" label-width="20%">
        <el-input v-model="addr.phone" placeholder="请输入电话" style=" width: 400px
        "/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialogShow = false">取消</el-button>
        <el-button @click="update">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改地址的对话框结束 -->
</template>

<script setup>
import addrApi from "@/api/addrApi.js";
import {ref} from "vue";
import pcas from "@/stores/pcas-code.json";
import {ElMessage, ElMessageBox} from "element-plus";
import cartApi from "@/api/cartApi.js";
//当前用户的所有地址信息
const addrList = ref([])
const addDialogShow = ref(false)//是否让添加对话框显示
const updateDialogShow = ref(false)//是否让添加对话框显示
//保存新增和修改地址信息的对象
const addr = ref({
  id: null,
  contact: "",
  phone: "",
  province: "",
  city: "",
  district: "",
  street: "",
  address: "",
  userId: null
})
//选中的省
const province = ref({})
//选中的市
const city = ref({})
//选中的区县
const district = ref({})

//省被选中之后的调用
function selectProvince(value) {
  city.value = {}
  district.value = {}
  addr.value.city = ""
  addr.value.district = ""
  addr.value.street = ""
  //province和被选中的省的对象绑定
  pcas.forEach(p => {
    if (p.name === value) {
      province.value = p
    }
  })
}

//市被选中之后的调用
function selectCity(value) {
  district.value = {}
  addr.value.district = ""
  addr.value.street = ""
  //city和被选中市的对象绑定
  province.value.children.forEach(c => {
    if (c.name === value) {
      city.value = c
    }
  })
}

//区县被选中之后的调用
function selectDistrict(value) {
  addr.value.street = ""
  //district和被选中区县的对象绑定
  city.value.children.forEach(d => {
    if (d.name === value) {
      district.value = d
    }
  })
}
//设置默认
function setDefault(id){
  let addr={
    id,
    status:1
  }
  addrApi.update(addr)
        .then(resp => {
          if (resp.code===10000){
            ElMessage.success(resp.msg);
            getAddrList()
          }else{
            ElMessage.error(resp.msg);
          }
        })
}
//改默认地址,写麻烦了,换方法
// function changeStatus(id) {
//   addrList.value.forEach(addr => {
//     //addr.status = 0
//     addrApi.update({id: addr.id, status: 0})
//         .then(resp => {
//         })
//     if (id === addr.id) {
//       addrApi.update({id: id, status: 1})
//           .then(resp => {
//             //resp.status=1
//             ElMessage.success(resp.msg)
//           })
//     }
//   })
//   getAddrList()
// }

//添加地址
function insert() {
  addrApi.insert(addr.value)
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success(resp.msg)
          addr.value = {
            id: null,
            contact: "",
            phone: "",
            province: "",
            city: "",
            district: "",
            street: "",
            address: "",
            userId: null
          }
          province.value = {}
          city.value = {}
          district.value = {}
          addDialogShow.value = false
          getAddrList()
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

//删除地址
function deleteAddr(id) {
  ElMessageBox.confirm(
      '确定要删除???',
      'Point',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        addrApi.delete(id)
            .then(resp => {
              if (resp.code === 10000) {
                ElMessage.success(resp.msg)
                getAddrList()
              } else {
                ElMessage.error(resp.msg)
              }
            })
      })

}

//查询地址信息并显示修改对话框
function showUpdateDialogShow(id) {
  //根据id查询地址信息
  addrApi.selectById(id)
      .then(resp => {
        if (resp.code === 10000) {
          addr.value = resp.data
          //设置province、city、district的值
          x:for (let p of pcas) {
            if (p.name === addr.value.province) {
              province.value = p;
              for (let c of province.value.children) {
                if (c.name === addr.value.city) {
                  city.value = c;
                  for (let d of city.value.children) {
                    if (d.name === addr.value.district) {
                      district.value = d;
                      break x;
                    }
                  }
                }
              }
            }
          }
          updateDialogShow.value = true//弹出修改框
        } else {
          ElMessage.error(resp.msg);
        }
      })

}

//修改地址信息
function update() {
  addrApi.update(addr.value)
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success(resp.msg)
          updateDialogShow.value = false
          getAddrList()
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

//获取当前用户的所有地址
function getAddrList() {
  addrApi.selectByUser()
      .then(resp => {
        //console.log(resp.data)
        addrList.value = resp.data
      })
}

getAddrList()
</script>

<style scoped>
.addrList li {
  margin: 0 20px 20px 0;
  float: left;
  width: 400px;
  border: 1px solid black;
}

.addrList li:hover {
  box-shadow: 0 0 10px black;
}

.addrList li div {
  height: 30px;
  line-height: 30px;
  margin-left: 10px;
}

.addrList li .area {
  font-weight: bold;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.addrList li .address {
  font-size: 12px;
  color: #13ce66;
}

.addrList li .contact {
  font-weight: bold;
  color: #ff6800;
}

.addrList li .option {
  float: right;
  margin-bottom: 7px;
}
.addrList .defaultAddr {
  border: 1px solid black;
}
.addrList .defaultAddr:hover {
  box-shadow: 0 0 10px var(--theme-color);
}
</style>